<template>
  <div class="container">
    <div class="title">
      <p>{{ showTitle }}</p>
      <i class="fa icon" :class="isShow ? 'fa-chevron-up' : 'fa-chevron-down'" @click="butShowBox"></i>
      <div class="show-box" v-show="isShow">
        <p class="selected" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">{{item.text}}</p>
      </div>
    </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
export default {
  name: "Trend",
  data() {
    return {
      chartInstance: null,
      allData: null,  //数据
      isShow: false,
      choiceType: 'map',
    }
  },
  created() {
    this.$socket.registerCallBack('trendData',this.getData)
  },

  mounted() {
    this.initChart();
    // this.getData();
    this.$socket.send({
      action: 'getData',
      socketType: 'trendData',
      chartName: 'trend',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('trendData')
    window.removeEventListener('resize', this.screenAdapter)
  },
  computed: {
    selectTypes(){
      if (!this.allData) {
        return []
      } else {
        return this.allData.type.filter(item => {
          return item.key !== this.choiceType
        })
      }
    },
    showTitle(){
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.choiceType].title
      }
    }
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.trend_ref, 'chalk')
      const initOptions = {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: '10%',
          top: '4%',
          icon: 'circle'
        }
      }
      this.chartInstance.setOption(initOptions)
    },
    async getData(ret) {
      // const { data: ret } = await this.$http.get('trend')
      this.allData = ret
      this.updateChart()
    },
    updateChart() {
      const timeArr = this.allData.common.month
      const valueArr = this.allData[this.choiceType].data
      const offset0 = [
        'rgba(4, 184, 21, .8)',
        'rgba(189, 0, 46, .8)',
        'rgba(129, 31, 173, .8)',
        'rgba(255, 118, 0,.8)',
        'rgba(68, 205, 245, .8)'
      ];
      const offset1 = [
        'rgba(132, 94, 194, 0)',
        'rgba(75, 68, 83, 0)',
        'rgba(176, 168, 185, 0)',
        'rgba(195, 74, 54,0)',
        'rgba(255, 128, 102, 0)'
      ]
      const seriesArr = valueArr.map((item, index) => {
        return {
          name: item.name,
          type: 'line',
          data: item.data,
          stack: this.choiceType,
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: offset0[index]
              },
              {
                offset: 1,
                color: offset1[index]
              }
            ])
          }
        }
      })
      // 图例数据
      const legendArr = valueArr.map(item => {
        return item.name
      })
      const dataOptions = {
        xAxis: {
          data: timeArr
        },
        legend: {
          data: legendArr
        },
        series: seriesArr
      };
      this.chartInstance.setOption(dataOptions)
    },
    screenAdapter() {
      this.chartInstance.resize()
    },
    // 点击选择
    butShowBox(){
      this.isShow = !this.isShow;
    },
    // 数据切换
    handleSelect(currentType){
      this.choiceType = currentType;
      this.updateChart()
      this.isShow = !this.isShow;
    }
  }
}
</script>

<style scoped lang="less">
  .title {
    position: absolute;
    z-index: 9;
    color: #ffffff;
    right: 10%;
    top: 5%;
    user-select: none;
    & > p:first-child {
      display: inline;
    }
    p {
      cursor: pointer;
    }
    .icon {
      margin-left: 50px;
      cursor: pointer;
    }
  }
</style>